<!--
 * @Author: Sam
 * @Date: 2020-10-26 11:11:25
 * @LastEditTime: 2021-06-30 10:58:07
 * @LastEditors: Sam
 * @Description: 
 * @FilePath: \resourcesf:\thework\ygboost-eui\src\components\app\edit\setting\channel\TableComponent.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <el-table
    class="table-box margin-top"
    :border="true"
    :data="tableInfo"
    style="width: 100%"
    size="mini"
  >
    <el-table-column type="index" label="序号" />
    <el-table-column label="分区/计费段" prop="partition" show-overflow-tooltip>
    </el-table-column>
    <!-- 遍历col -->
    <el-table-column
      v-for="column in tableColumns"
      :key="column.id"
      :auto-fit="true"
      :fit-header="true"
      show-overflow-tooltip
      :prop="`${column.id}`"
      :label="`${column.start} ~ ${column.end}`"
    >
      <div slot-scope="scope" class="column-wrapper">
        <div
          class="column-content auto-fit-target"
          :title="scope.row[scope.column.property]"
        >
          {{
            scope.row[scope.column.property].formula
              ? scope.row[scope.column.property].formula
              : ""
          }}
        </div>
      </div>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableInfo: []
    };
  },
  props: {
    tableColumns: {
      type: Array,
      // 表格头部信息
      default: function() {
        return [];
      }
    },
    tableData: {
      type: Array,
      // 表格数据
      default: function() {
        return [];
      }
    },
    sortList: {
      type: Array,
      // 排序数据
      default: function() {
        return [];
      }
    },
    channelFormulaMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    countrys: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    countryStates: {
      type: Object,
      default: function(params) {
        return {};
      }
    }
  },
  watch: {
    tableData: {
      handler(val) {
        console.log(val);
        this.fn();
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    // console.log(this.tableData);
  },
  methods: {
    fn() {
      const arr = [];

      for (const i of this.tableData) {
        const subareaArr = [];
        const formulaObj = {};
        for (const k of i.subareaDetails) {
          subareaArr.push(
            k.countryId
              ? this.countrys[k.countryId]
              : this.countryStates[k.stateId]
          );
        }
        for (const j of this.tableColumns) {
          formulaObj[j.id] = this.channelFormulaMap[`${i.id}_${j.id}`];
        }
        formulaObj["partition"] = subareaArr.toString();
        formulaObj.id = i.id;
        arr.push(formulaObj);
      }
      this.tableInfo = arr;

      if (this.sortList.length > 0) {
        const newArr = [];
        for (const i of this.sortList) {
          const target = arr.find(x => x.id === i);
          if (target) {
            newArr.push(target);
          }
        }
        this.tableInfo = newArr;
      }
    }
  }
};
</script>

<style></style>
